<template>
  <div>
    <div class="iot_notice">
        <div class="iot_notice_column">
            <ul>
                <li class="iot_notice_column_jiaoxue"><a href="javascript:" @click="jiaoxue"><font color="black">教学通知<span id="jiaoxuetongzhi" class="iot___ fa fa-sort-asc" style="color: #0170c1;position: absolute;font-size: 25px;left: 345px;top: 218px"></span></font></a></li>
                <li class="iot_notice_column_gonggao"><a href="javascript:" @click="gonggao"><font color="black">长期公告<span id="changqigonggao" class="iot___ fa fa-sort-asc" style="color: #0170c1;position: absolute;font-size: 25px;left: 435px;top: 218px;display: none"></span></font></a></li>
                <a class="iot_notice_column_more" href="https://jiaowu.sicau.edu.cn/web/web/web/gwmore.asp"><span class="iot_____ fa fa-plus-square-o" style="margin-right: 5px;margin-top: 4px"></span>MORE</a>
            </ul>
        </div>
       <div class="iot_notice_teachingnotice" id="iot_notice_teachingnotice">
           <ul>

               <li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5969" title="">关于成都校区及都江堰校区2023届毕业生教师资格…</a>
                   <span>[03-30]</span>
               </li>

               <li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5968" title="">关于2023年全国大学生英语竞赛报名的通知</a>
                   <span>[03-29]</span>
               </li>

               <li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5966" title="">关于开展2023届本科毕业论文工作…</a>
                   <span>[03-27]</span>
               </li>

               <li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5964" title="">关于举办第十五届畜禽养殖技能大赛的通知</a>
                   <span>[03-23]</span>
               </li>

               <li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5962" title="">关于举办第九届机械创新设计大赛暨三维建模设计大赛…</a>
                   <span>[03-22]</span>
               </li>

               <li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5961" title="">关于举办四川农业大学第二届大学生植物科普微视频大…</a>
                   <span>[03-20]</span>
               </li>

               <li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5960" title="">关于举办四川农业大学第一届计算机设计大赛</a>
                   <span>[03-15]</span>
               </li>

               <li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5958" title="">关于2022-2023-1学期课程缓补考考试安排…</a>
                   <span>[03-15]</span>
               </li>

               <li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5957" title="">2022-2023-2学期重修及毕业年级选课的通…</a>
                   <span>[03-14]</span>
               </li>

               <li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5954" title="">关于2023年春季科研兴趣培养计划项目结题通知</a>
                   <span>[03-14]</span>
               </li>

               <li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5953" title="">关于开展2022-2023-2学期证书免修工作的…</a>
                   <span>[03-09]</span>
               </li>

               <li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5951" title="">关于举办第八届全国大学生生命科学竞赛（创新创业类…</a>
                   <span>[03-09]</span>
               </li>

               <li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5950" title="">关于开展2023年大学生创新创业训练计划项目认定…</a>
                   <span>[03-08]</span>
               </li>

           </ul>
       </div>
       <div class="iot_notice_Longannouncements" id="iot_notice_Longannouncements">
           <ul>
                           <li><a href="http://jiaowu.sicau.edu.cn/web/web/web/rule/bkjxzlbg_2016-2017.pdf" target="_blank">四川农业大学2016-2017学年本科教学质量报告</a><span>[09-24]</span></li>

							<li><a href="http://jiaowu.sicau.edu.cn/web/web/web/rule/20071020.htm" target="_blank">学籍及毕业证书政策告知</a><span>[09-24]</span></li>

							<li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5970" title="">关于开展2023届本科毕业论文（设计）反抄袭检测…</a>
							<span>[04-04]</span>
							</li>

							<li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5966" title="">关于开展2023届本科毕业论文（设计）后期工作的…</a>
							<span>[03-27]</span>
							</li>

							<li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5954" title="">关于2023年春季科研兴趣培养计划项目结题通知</a>
							<span>[03-14]</span>
							</li>

							<li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5942" title="">关于开展2024届本科毕业论文（设计）开题答辩工…</a>
							<span>[02-27]</span>
							</li>

							<li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5941" title="">关于补办学生证和火车票优惠卡的通知</a>
							<span>[02-27]</span>
							</li>

							<li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5932" title="">关于公布2023年专业技能提升计划立项项目的通知</a>
							<span>[01-08]</span>
							</li>

							<li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5931" title="">关于对超过学习年限本专科学生作退学处理的公告</a>
							<span>[01-04]</span>
							</li>

							<li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5908" title="">关于公布2023年度本科生科研兴趣培养计划项目立…</a>
							<span>[12-09]</span>
							</li>

							<li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5882" title="">关于开展2024届本科毕业论文（设计）工作的通知</a>
							<span>[11-09]</span>
							</li>

							<li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5870" title="">关于组织2021年度四川省科技创新苗子工程培育项…</a>
							<span>[10-28]</span>
							</li>

							<li><a href="https://jiaowu.sicau.edu.cn/web/web/web/gwshenshow_x_2019.asp?bianhao=5861" title="">关于开展2022年秋季大学生创业训练（实践）计划…</a>
							<span>[10-26]</span>
							</li>






           </ul>
       </div>
   </div><!--通知-->

   <div class="iot_news">
       <div class="iot_news_title">
          <p>新闻动态</p>
          <a class="iot_notice_column_more" href="https://jiaowu.sicau.edu.cn/web/web/web/gwmore.asp"><span class="iot_____ fa fa-plus-square-o" style="margin-right: 5px;margin-top: 4px"></span>MORE</a>
       </div>
       <div class="iot_notice_image" @click="changeimg">
        <!-- 图片区域 -->
             <ul>
                <li class="iot_active"><img src="../images/news1.png" alt=""></li>
                <li ><img src="../images/news2.png" alt=""></li>
                <li ><img src="../images/news3.png" alt=""></li>
                <li ><img src="../images/news4.png" alt=""></li>
             </ul>
        <!-- 焦点区域 -->
             <ol>
                <li data-i="0" data-name="point" class="iot_active"></li>
                <li data-i="1" data-name="point"></li>
                <li data-i="2" data-name="point"></li>
                <li data-i="3" data-name="point"></li>
             </ol>
     <!-- 左右切换按钮 -->
           <div class="left">&lt;</div>
           <div class="right">&gt;</div>




       </div>
       <div class="iot_newslist">
            <ul>


                <li> <a href="http://202.115.177.18/jwnews/view.asp?id=1011" title="教务处等四部门联合组织开展新修订管理文件宣讲会">教务处等四部门联合组织开展新修订管理...</a>
						<span>[04-03]</span></li>


                <li> <a href="http://202.115.177.18/jwnews/view.asp?id=1010" title="两校教学管理交流座谈会举行 --西昌学院教务处处长边仕英带队来校交流">两校教学管理交流座谈会举行 --西昌...</a>
						<span>[04-02]</span></li>


                <li> <a href="http://202.115.177.18/jwnews/view.asp?id=1009" title="马克思主义学院召开新学期教学督导会议">马克思主义学院召开新学期教学督导会议</a>
						<span>[03-23]</span></li>


                <li> <a href="http://202.115.177.18/jwnews/view.asp?id=1008" title="理学院召开新学期督导工作会议">理学院召开新学期督导工作会议</a>
						<span>[03-22]</span></li>


                <li> <a href="http://202.115.177.18/jwnews/view.asp?id=1007" title="环境学院召开新学期教学督导工作组会议">环境学院召开新学期教学督导工作组会议</a>
						<span>[03-22]</span></li>


                <li> <a href="http://202.115.177.18/jwnews/view.asp?id=1006" title="马克思主义学院召开一流课程申报工作启动会">马克思主义学院召开一流课程申报工作启...</a>
						<span>[03-16]</span></li>


                <li> <a href="http://202.115.177.18/jwnews/view.asp?id=1005" title="“督”“导”并行，助力专业建设和学科发展">“督”“导”并行，助力专业建设和学科...</a>
						<span>[03-15]</span></li>


                <li> <a href="http://202.115.177.18/jwnews/view.asp?id=1004" title="不服来战！第九届“互联网+”校内复活赛顺利打响">不服来战！第九届“互联网+”校内复活...</a>
						<span>[03-13]</span></li>

            </ul>
       </div>
   </div><!--  新闻动态 -->
  </div>
</template>

<script>
export default {
    name:'NoticeAndNews',
    data() {
        return {
            index:0
        }
    },
    mounted() {
        this.settimer()
    },
    methods: {
        jiaoxue(){
            document.getElementById("iot_notice_Longannouncements").style.display="none";
            document.getElementById("iot_notice_teachingnotice").style.display="block";
            document.getElementById("jiaoxuetongzhi").style.display="block";
            document.getElementById("changqigonggao").style.display="none";
        },
        gonggao(){
             document.getElementById("iot_notice_teachingnotice").style.display="none";
            document.getElementById("iot_notice_Longannouncements").style.display="block";
              document.getElementById("jiaoxuetongzhi").style.display="none";
            document.getElementById("changqigonggao").style.display="block";
        },
       changeOne(type){
        var imgs=document.querySelectorAll('.iot_notice_image>ul>li');
        var points=document.querySelectorAll('.iot_notice_image>ol>li');
            //让当前这一张消失(将类名设为空)
            imgs[this.index].className='';
            points[this.index].className='';
            //根据type的值来切换index的值
                 if (type===true){
                    this.index++;
                 }
                 else if (type===false){
                    this.index--;
                 }
                 else{
                    this.index=type
                 }
                  //判断index的边界值
                  if(this.index>=imgs.length){
                    this.index=0;
                  }
                  if(this.index<0){
                    this.index=imgs.length-1;
                  }
                   //让改变后的这一张显示出来
                   imgs[this.index].className="iot_active";
                   points[this.index].className="iot_active";
            
           },
           //给轮播区域盒子绑定点击事件
      changeimg(e){
        //判断点击的是左按钮
        if(e.target.className=='left'){
           
            this.changeOne(false)
        }
        if(e.target.className=='right'){
           
            this.changeOne(true)
        }
        if(e.target.dataset.name=='point'){
            //拿到自己身上记录的索引
            var i=e.target.dataset.i-0//-0是转换为数字类型
            this.changeOne(i)
            
        }
    
      },
      settimer(){
        setInterval(()=>{
            this.changeOne(true)
        },5000)
    },
}
    
}
</script>

<style>
.iot_notice{
            margin-right: 20px;
            width: 446px;
            height: 550px;
            border: 1px solid rgba(0,0,0,0.2);
            float: left;
        }  /*通知*/
        .iot_notice:hover{
              box-shadow: 1px 1px 4px 6px rgba(0, 0, 0, 0.1);
            /*左右偏移、上下偏移、模糊距离、阴影尺寸、颜色*/
         }
        .iot_notice_column{
            width: 446px;
            height: 35px;
            border-bottom:3px solid #0170c1;

        }
        .iot_notice_column_more{
            float: right;
            margin-top: 8px;
            margin-right: 10px;
            color: #000000;
            font-size:5px;
        }
        .iot_notice_column_more:hover{
            color: #e75b5b;
        }
        .iot_notice_column>ul>li{
          float: left;
          height: 35px;
          line-height: 35px;
          padding: 0px 0px 0px 20px;
          margin-right: 0px;
          color: #000000;
          cursor: pointer; /*光标显示样式*/
          font-size: 16px;
          font-weight: bold;
        }

        .iot_notice_teachingnotice{
            display: block;
        }
        .iot_notice_teachingnotice>ul{
            margin-top: 10px;
        }
        .iot_notice_teachingnotice>ul>li{
            margin-bottom: 19px;
            margin-left: 10px;
        }
        .iot_notice_teachingnotice>ul>li>a{
             transition: margin 200ms ease-out;
            color: black;
            font-size: 14px;



        }
         .iot_notice_teachingnotice>ul>li>a:hover{
             margin-left: 20px;
             color: #e75b5b;
         }
         .iot_notice_teachingnotice>ul>li>span{
                 position: absolute;
                 float: right;
                 color: #bbb;


         }


        .iot_notice_Longannouncements{
            display: none;
        }
        .iot_notice_Longannouncements>ul{
            margin-top: 10px;
        }
        .iot_notice_Longannouncements>ul>li{

            margin-bottom: 19px;
            margin-left: 10px;

        }
        .iot_notice_Longannouncements>ul>li>a:hover{
              margin-left: 20px;
             color: #e75b5b;
        }

        .iot_notice_Longannouncements>ul>li>a{
            transition: margin 200ms ease-out;
            color: black;
            font-size: 14px;
        }
        .iot_notice_Longannouncements>ul>li>span{
                 position: absolute;
                 float: right;
                 color: #bbb;


         }


        .iot_news{
            width: 368px;
            height: 550px;
            border: 1px;
            margin-right: 20px;
            float: left;
            border: 1px solid rgba(0,0,0,0.2);
        }  /*新闻动态*/
        .iot_news:hover{
              box-shadow: 1px 1px 4px 6px rgba(0, 0, 0, 0.1);
            /*左右偏移、上下偏移、模糊距离、阴影尺寸、颜色*/
         }
        .iot_news_title{
            width: 368px;
            height: 35px;
            border-bottom:3px solid #0170c1;
         }
        .iot_news_title>p{
            float: left;
          height: 35px;
          line-height: 35px;
          padding: 0px 0px 0px 20px;
          margin-right: 0px;
          color: #000000;
          cursor: pointer; /*光标显示样式*/
          font-size: 16px;
          font-weight: bold;
        }
        ul,ol,li{
            list-style: none;
        }
        .iot_notice_image{
            width: 340px;
            height: 173px;
            border: 1px solid rgba(0,0,0,0.2);
            margin: 14px 14px;
            position: relative;
        }
        .iot_notice_image>ul{
            position: relative;
        }
        .iot_notice_image>ul>li{
            position: absolute;
            left: 0;
            top: 0;

            opacity: 0;
            transition: opacity .5s linear;
            
        }
        .iot_notice_image>ul>li.iot_active{
            opacity: 1;
        }
        .iot_notice_image>ol{
            width: 100px;
            height: 20px;
            left: 120px;
            top: 150px;
            position: absolute;
            background-color: rgba(0,0,0,.2);
            display: flex;
            align-items: center;
            border-radius: 10px;
        }
        .iot_notice_image>ol>li{
            margin-left: 12px;
            width: 10px;
            height: 10px;
            background-color: #ffffff;
            border-radius: 50%;
            cursor: pointer;
        }
        .iot_notice_image>ol>li.iot_active{
            background-color: gold;
        }

        .iot_notice_image>div{
            width: 20px;
            height: 30px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,.2);
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 30px;
            color: #ffffff;
        }
        .iot_notice_image>div.left{
            left: 0;
        }
        .iot_notice_image>div.right{
            right: 0;
        }


        img{
            width: 340px;
            height: 173px;
            display: block;

        }
        .iot_newslist>ul>li{
            margin-bottom: 19px;
            margin-left: 10px;
        }
        .iot_newslist>ul>li>a{
            transition: margin 200ms ease-out;
            color: black;
            font-size: 14px;
        }
        .iot_newslist>ul>li>a:hover{
            margin-left: 20px;
           color: #e75b5b;
      }
      .iot_newslist>ul>li>span{
        position: absolute;
        float: right;
        color: #bbb;


}
</style>